Component({
    behaviors: [],
    properties: {},
    data: {},
    lifetimes: {
        created() {},
        attached() {},
        ready() {
            this.draw();
        },
        moved() {},
        detached() {},
    },
    methods: {
        draw() {
            const id = "canvasText";
            const ctx = wx.createCanvasContext("canvasText", this);
            this.ctx = ctx;

            const query = wx.createSelectorQuery().in(this);
            query
                .select("#" + id)
                .boundingClientRect((res) => {
                    var w = parseInt(res.width / 2);
                    var h = parseInt(res.height / 2);
                    console.log(w);
                    console.log(h);
                    this.run(w, h);
                })
                .exec();
        },
        run(w, h) {
            this.ctx.beginPath();
            this.ctx.setFontSize(40);
            this.ctx.setFillStyle("#999");
            this.ctx.setTextAlign("center");
            this.ctx.setTextBaseline("middle");
            this.ctx.fillText("10%", w, h);
            this.ctx.draw();
        },
    },
});